<template>
	<view class="page-body pbox pt100 bg-white">
		<view class="top_logo" style="width: 150rpx;height: 150rpx;margin: 0rpx auto;">
			<u-image width="100%" height="100%"  :src="logo" shape="circle"></u-image>
		</view>
		<text class="block fs42 font-w700 mt50 text-center">{{site_name}}</text>
		<u-form :model="model" ref="uForm" :errorType="errorType" class="mt60">
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="phone" :label-position="labelPosition"
			 label="手机号码" prop="mobile" label-width="150">
				<u-input :border="border" placeholder="请输入手机号" v-model="model.mobile" type="number"></u-input>
			</u-form-item>
			<view v-if="model.login_type==0">
				<u-form-item :label-position="labelPosition" label="密码" prop="password">
					<u-input :password-icon="false" :border="border" type="password" v-model="model.password" placeholder="请输入密码"></u-input>
				</u-form-item>

				<u-form-item :label-position="labelPosition" label="记住密码" prop="remember" label-width="150">
					<u-switch v-model="model.remember" slot="right"></u-switch>
				</u-form-item>
			</view>
			<u-form-item  v-if="model.login_type==1" :label-position="labelPosition" label="验证码"
			 prop="code" label-width="150">
				<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="text"></u-input>
				<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
			</u-form-item>
			<u-form-item v-if="showVerify" :label-position="labelPosition" label="图形验证码" prop="verifyCode" label-width="150">
				<u-input :border="border" placeholder="输入验证码" v-model="model.verifyCode" type="text"></u-input>
				<u-image width="200rpx" height="80rpx" :src="verifyUrl" @click="changeVerifyUrl"></u-image>
			</u-form-item>
			<view class=" primary smll mt40">
				<view class="flex_bd">
					<text v-if="channel_sms_login"  @click="changeLogin">{{logintype}}</text>
				</view>
				<view v-if="channel_sms_forget_pw" @click="goForget">忘记密码？</view>
			</view>
			<u-button size="default" shape="circle" type="primary" class="block mt40" @click="submit">登录</u-button>
			<view class="mt40 clearfix primary text-center">
				<text @click="goRegister">代理注册</text>
			</view>
			<view class="mt50 text-center fs26 color-99">
				技术支持@广州科技有限公司
			</view>
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</u-form>
	</view>
</template>

<script>
	let that = this;
	var settings = uni.getStorageSync('setting');
	export default {
		data() {
			return {
				logo: this.config.baseUrl + settings.logo,
				site_name: settings.site_name,
				channel_sms_login: settings.channel_sms_login,
				channel_sms_forget_pw: settings.channel_sms_forget_pw,
				logintype: '短信登录',
				verifyUrl: '',
				showVerify: false,
				model: {
					mobile: uni.getStorageSync("loginMobile"),
					code: '',
					password: uni.getStorageSync("loginPassword"),
					login_type: 0,
					remember: uni.getStorageSync("loginPassword") ? true : false,
					verifyCode: '',
				},
				pwrules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							min: 8,
							message: '密码不能少于8个字符',
							trigger: 'change',
						}
					]
				},
				msmrules: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							min: 6,
							required: true,
							message: '请输入6位验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					]
				},
				rulesgetCode: {
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					]
				},
				border: false,
				check: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast']
			};
		},
		onLoad(options) {
			this.verifyUrl = this.config.baseUrl + '/index.php/publics/api.index/verify/session_id/' + uni.getStorageSync("session_id");
			this.app.getWxOauthOpenId(this,options);//默认只有初次打开时触发获取openid,退出登陆后后清理openid后，再访问登陆页重新获取
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			},
		},
		onShow() {
			uni.removeStorageSync("isNotLoginTip");//未登陆提示，此值会限制网络请求
		},
		onReady() {
			this.$refs.uForm.setRules(this.pwrules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.setStorageSync("loginMobile", this.model.mobile); //记住手机号
						if (this.model.remember == true) {
							uni.setStorageSync("loginPassword", this.model.password); //记住密码
						} else {
							try {
								uni.removeStorageSync('loginPassword'); //销毁记住密码
							} catch (e) {}
						}
						this.$u.get('channel/api.passport/login', this.model).then(res => {
							if (res.code < 0) {
								this.showVerify = res.data.showVerify;
								this.$u.toast(res.msg);
								return false;
							}
							this.app.setAuthCode(res.data.token);
							if (res.data.join_condition == 0){//未满足加入门槛，跳转
								uni.redirectTo({
								    url: '/pagesB/channel/center/joinCondition'
								});
								return false;
							}
							uni.redirectTo({
							    url: '/pagesB/channel/center/index'
							})
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			changeLogin(text) {
				if (this.model.login_type == 0) {
					this.logintype = '短信登录';
					this.model.login_type = 1;
					this.$refs.uForm.setRules(this.msmrules);
				} else {
					this.logintype = '密码登录';
					this.model.login_type = 0;
					this.$refs.uForm.setRules(this.pwrules);
				}
			},
			changeVerifyUrl() {
				if (this.verifyUrl.indexOf('rand=') > -1) {
					this.verifyUrl = this.verifyUrl.substr(0, this.verifyUrl.length - 19);
				}
				this.verifyUrl += '?rand=' + new Date().getTime();
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$refs.uForm.setRules(this.rulesgetCode);
					this.$refs.uForm.validate(valid => {
						if (valid) {
							// 向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码',
								mask: true
							})
							this.$u.get('publics/api.sms/sendCode', {
								'type': 'channel_sms_login',
								'mobile': this.model.mobile
							}).then(res => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								if (res.data.code){
									this.$u.toast('测试状态，验证码自动填充');
									this.model.code = res.data.code;
								}else{
									this.$u.toast('验证码已发送');
								}
								this.user_exist = res.data.user_exist;
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							})
						}
					});
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			goForget() {
				uni.navigateTo({
					url: '/pagesB/channel/passport/forget'
				});
			},
			goRegister() {
				uni.navigateTo({
					url: '/pagesB/channel/passport/register'
				});
			}
		}
	}
</script>
<style>
</style>
